<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据导入</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/webuploader/0.1.1/webuploader.css" rel="stylesheet">
<style type="text/css">
html{font-size:14px;}
button{border-radius:3px;border:1px solid transparent;padding:8px 18px;cursor:pointer;}
.btn-primary {background-color: #1ab394;border-color: #1ab394;color: #FFF;}
.btn-white {background-color: #fff;border-color: #1ab394;color: #1ab394;}
</style>
</head>
<body>
	<p align="center">请<a id="downloadTemplate" href="javascript:void(0)" style="color:#1ab394;">下载导入模板</a>后，根据模板格式填写数据，并进行导入</p>
	<p id="attach" align="center">
	</p>
	<p id="thelist" style="height: 60px;" align="center"></p>
	<br/>
	<p align="center">
		<button type="button" class="btn-white" onclick="parent.dataImportDialog.close().remove()">关闭</button>
		<button type="button" class="btn-primary" id="submit">确定</button>
	</p>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webuploader/0.1.1/webuploader.html5only.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.8/uuid.min.js"></script>
<script type="text/javascript">
var path = "<%=path%>";
var downloadTemplate;	//下载模板
var beanName;			//beanName
var extensions;			//后缀
var uploader;
var paramJsonStr;

$(function(){
	$("#submit").click(function(){
		uploader.upload();
	});
	
	init();
});

function init(){
	downloadTemplate = getUrlParam("downloadTemplate");
	beanName = getUrlParam("beanName");
	extensions = getUrlParam("extensions");
	paramJsonStr=getUrlParam("paramJsonStr");
	if(downloadTemplate != null){
		$("#downloadTemplate").attr("href",downloadTemplate);
	}
	
	var $list = $("#thelist");
	var fileId = "";
	var chunks = 0;	//总片数
	uploader = WebUploader.create({
		server : path + "/bigFileUpload/webUploader",
		accept: {
            title: 'CSV',
            // extensions: 'csv'
            mimeTypes: 'text/csv,application/csv,text/comma-separated-values'
        },
		auto : false, //是否自动上传
		pick : {
			id : '#attach',
			name : "multiFile", //这个地方 name 没什么用，和fileVal 配合使用。  
			label : '点击选择文件',
			multiple : false
		},
		fileVal : 'multiFile', //自定义file的name属性，我用的版本是0.1.5 ,打开客户端调试器发现生成的input 的name 没改过来。
		duplicate : true,//是否可重复选择同一文件  
		resize : false,
		chunked : true, //分片处理  
		chunkSize : 20 * 1024 * 1024, //每片20M  
		chunkRetry : 2,//如果失败，则不重试  
		threads : 4,//上传并发数。允许同时最大上传进程数。  
		compress : false,
		disableGlobalDnd : true
	});

	// 当有文件添加进来的时候  
	uploader.on("fileQueued", function(file) {
		if(extensions != null && extensions.indexOf(file.ext) < 0 || "untitled1" == file.name){
			uploader.reset();
			$list.html("");
			alert("文件类型不正确");
			return ;
		}
		$list.html("<div id='"+  file.id + "' class='item'>"
				+ "<h4 class='info'>" + file.name + "</h4>"
				+ "<p class='state'>等待上传...</p>" + "</div>");

		fileId = uuid.v4();
	});

	//当文件上传成功时触发。  
	uploader.on("uploadSuccess", function(file, response) {
		$.post(path + "/bigFileUpload/uploadSuccess",{
			fileId: fileId,
			chunks: chunks,
			fileExtName: file.ext,
			beanName: beanName,
			paramJsonStr:paramJsonStr
		},function(){
			$list.html("<div id='"+  file.id + "' class='item'>"
					+ "<h4 class='info'>" + file.name + "</h4>"
					+ "<p class='state'>上传成功</p>" + "</div>");
			try{
				parent.func_dataTableReload2();
				parent.successDialog("导入成功！");
			}catch (e) {
			}
			parent.dataImportDialog.close().remove();
			
		},"json");
	});

	uploader.on("uploadError", function(file) {
		$("#" + file.id).find("p.state").text("上传出错");
		uploader.cancelFile(file);
		uploader.removeFile(file, true);
		uploader.reset();
	});

	uploader.on('uploadBeforeSend', function(block, data) {
		data.uid = fileId;
		data.ext = block.file.ext;
		chunks = block.chunks;
	});
}

function getUrlParam(key){
	var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r!=null)return  unescape(r[2]); return null;
}
</script>
</html>